<template>
    <!-- 健康管理下的档案管理 -->
    <div>
        <el-form :inline="true" :model="formInline" style="margin: 0;">
            <el-form-item>
                <el-col :span="11.5">
                    <el-input
                    type="number"
                    placeholder="低压最小值"
                    v-model.number="formInline.minMinPre"
                    >
                    </el-input>
                </el-col>
                <el-col class="line" :span="0.5">-</el-col>
                <el-col :span="11.5">
                    <el-input
                    type="number"
                    placeholder="低压最大值"
                    v-model.number="formInline.minMaxPre"
                    >
                    </el-input>
                </el-col>
            </el-form-item>

            <el-form-item>
                <el-col :span="11.5">
                    <el-input
                    type="number"
                    placeholder="高压最小值"
                    v-model.number="formInline.maxMinPre"
                    >
                    </el-input>
                </el-col>
                <el-col class="line" :span="0.5">-</el-col>
                <el-col :span="11.5">
                    <el-input
                    type="number"
                    placeholder="高压最大值"
                    v-model.number="formInline.maxMaxPre"
                    >
                    </el-input>
                </el-col>
            </el-form-item>

            <el-form-item>
            <el-button type="primary" @click="onSelect">查 询</el-button>
            </el-form-item>
            <el-form-item>
            <el-button @click="onRest">重 置</el-button>
            </el-form-item>
            <el-form-item>
            <el-button type="danger" @click="deleteListOlder" style="margin-left: 100px;">批量删除</el-button>
            </el-form-item>
        </el-form>

        <el-divider style="margin-top: 0px; padding: 0;"></el-divider>

        <div style="border-radius: 15px; background-color: white; padding: 20px; border: none;">
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    @selection-change="handleSelectionChange"
                    :default-sort = "{prop: 'create_time', order: 'descending'}"
                    :row-class-name="tableRowClassName"
                    height="550"
                    >

                    <el-table-column
                    type="selection"
                    width="45"
                    align='center'>
                    </el-table-column>

                    <el-table-column
                    label="建档时间"
                    width="123"
                    prop="create_time"
                    sortable
                    align='center'
                    >
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
                    </template>
                    </el-table-column>

                    <el-table-column
                    label="用户名"
                    prop="older_name"
                    width="90"
                    show-overflow-tooltip
                    align='center'
                    >
                    <template slot-scope="scope">
                            <el-tag size="medium">{{ scope.row.older_name }}</el-tag>
                    </template>
                    </el-table-column>

                    <el-table-column
                    prop="sex"
                    label="性别"
                    width="48"
                    align='center'>
                    </el-table-column>
                    
                    <el-table-column
                    prop="age"
                    label="年龄"
                    width="72"
                    sortable
                    align='center'>
                    </el-table-column>

                    <el-table-column
                    prop="height"
                    label="身高(cm)"
                    width="104"
                    sortable
                    align='center'>
                    </el-table-column>

                    <el-table-column
                    prop="weight"
                    label="体重(kg)"
                    width="101"
                    sortable
                    align='center'>
                    </el-table-column>

                    <el-table-column
                    prop="high_pressure"
                    label="高压(mmHg)"
                    width="132"
                    sortable
                    align='center'>
                    </el-table-column>

                    
                    <el-table-column
                    prop="min_pressure"
                    label="低压(mmHg)"
                    width="132"
                    sortable
                    align='center'>
                    </el-table-column>

                    <el-table-column
                    prop="min_pressure"
                    label="体温(℃)"
                    width="97"
                    sortable
                    align='center'>
                    </el-table-column>

                    <el-table-column
                    prop="pulse"
                    label="脉搏(次/min)"
                    width="131"
                    sortable
                    align='center'>
                    </el-table-column>

                    <el-table-column
                    prop="respiratory_rate"
                    label="呼吸频率(次/min)"
                    width="159"
                    sortable
                    align='center'
                    >
                    </el-table-column>

                    <el-table-column label="操作" align='center' width="142">
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">详情</el-button>
                            <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>

                </el-table>
        </div>

        <!-- 分页 -->
        <el-pagination
          style="margin-top: 10px;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[9, 18, 27, 36]"
          :page-size="9"
          layout="total, sizes, prev, pager, next, jumper"
          :total="allTableDate.length"
          >
      </el-pagination>

      <!-- 详情对话框 -->
      <FilesOlderDetailDialogBox/>
    </div>
</template>

<script>
    import FilesOlderDetailDialogBox from './FilesOlderDetailDialogBox';
    import myAxios from '@/tools/myAxios';
    import Qs from 'qs';
    export default {
        name:'FilesManage',
        components:{
            FilesOlderDetailDialogBox,
        },
        data() {
            return {
                formInline:{
                    minMinPre:'',
                    minMaxPre:'',
                    maxMinPre:'',
                    maxMaxPre:''
                },
                // 用来展示的老人健康档案信息
                tableData: [],
                // 所有的老人健康档案信息
                allTableDate:[],
                // 存放全选的数据
                multipleSelection:[],
                // 用来记录当前一页是展示多少条数据,默认值是5
                itemDataTotal:9,

            }
        },
        methods:{
            // 查询按钮(可以根据用户名来模糊查询)
            onSelect() {
                if(this.formInline.minMinPre !== '' && this.formInline.minMaxPre !== '' || this.formInline.maxMinPre !== '' && this.formInline.maxMaxPre !== ''){
                    myAxios(
                        'http://localhost:8088/older/getallolderhealthbyrange',
                        'post',
                        Qs.stringify(this.formInline),
                        (data)=>{
                            if(data.length != 0){
                                this.allTableDate = data;
                                // 初始化时显示前9条数据
                                this.tableData = this.allTableDate.slice(0,9);
                            }else{
                                // 提示一下
                                this.$message({
                                    message: '查询结果为空!',
                                    type: 'warning'
                                });
                                this.formInline.minMinPre = '';
                                this.formInline.minMaxPre = '';
                                this.formInline.maxMinPre = '';
                                this.formInline.maxMaxPre = '';
                            }
                        }
                    );
                }else{
                    this.$notify({
                    title: '警告',
                    message: '请输入正确的条件后再来查询!',
                    type: 'warning'
                    });
                }
            },
            // 重置按钮
            onRest(){
                window.location.reload();
            },
            // 批量删除
            deleteListOlder(){
                const arr = [];
                this.multipleSelection.forEach(element => {
                    arr.unshift(element.id);
                });
                if(arr.length === 0){
                    // 提示一下
                    this.$message({
                        message: '没有需要删除的数据!',
                        type: 'warning'
                    });
                    return;
                }
                myAxios(
                    'http://localhost:8088/older/deleteonegroupolderhealthinfo',
                    'post',
                    Qs.stringify({
                        'oldersID':arr
                    }),
                    (data)=>{
                        window.location.reload();
                        // 提示一下
                        this.$message({
                            message: '批量删除成功!',
                            type: 'success'
                        });
                    }
                )
            },
            // 选择每页的展示条数
            handleSizeChange(val) {
                this.tableData = this.allTableDate.slice(0,val);
                this.itemDataTotal = val;
            },
            // 显示第几页的数据
            handleCurrentChange(val) {
                this.tableData = this.allTableDate.slice((val-1)*this.itemDataTotal,val*this.itemDataTotal);
            },
            // 批量删除
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 斑马纹颜色
            tableRowClassName({row, rowIndex}) {
                if(rowIndex % 2 === 1){
                    return 'warning-row';
                }else{
                    return '';
                }
            },
            // 详情
            handleEdit(index, row) {
                this.$bus.$emit('clickHealthDetail',JSON.parse(JSON.stringify(row)))
            },
            // 删除
            handleDelete(index, row) {
                myAxios(
                    'http://localhost:8088/older/deletehealthfile?id='+row.id,
                    'get',
                    null,
                    (data)=>{
                        window.location.reload();
                        const h = this.$createElement;
                        this.$notify({
                            title: '提示',
                            message: h('i', { style: 'color: teal'}, '删除成功!')
                        });
                    }
                )
            }
        },
        mounted(){
            // 获取所有的老人健康档案信息
            myAxios(
                'http://localhost:8088/older/getallolderhealthfiles',
                'get',
                null,
                (data)=>{
                    this.allTableDate = data;
                    // 初始化时显示前9条数据
                    this.tableData = this.allTableDate.slice(0,9);
                }
            )
        }
    }
</script>

<style scoped>
.el-divider--horizontal {
    margin-top: 0;
}

.el-table--border::after, .el-table--group::after, .el-table::before {
    content: '';
    position: relative;
    background-color: white;
    z-index: 1;
}
</style>